<!--16齿轮胶合与磨损计算（AGMA）-->
<template>
  <div style="height: 100%;width: 100%">
    <a-row style="height: 100%;width: 100%">
      <a-col span="24" style="height: 100%">
        <div class="sum" style="width: 100%; height: 100%;position:relative;">
          <button
            class="a"
            :class="{ select_active: this.AisSelectActive }"
            @click="select"
            style="margin-left: 0.95%"
          >
            输入参数
          </button>
          <button
            class="b"
            :class="{ select_active: this.BisSelectActive }"
            @click="select"
          >
            输出参数
          </button>
          <div class="da">
            <div class="title" style="height: 4%">输入参数</div>
            <div class="a-left">
              <div class="a-left-top">
                <div class="title" style="height: 8%">几何参数</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font">
                      <li></li>
                      <li>齿数</li>
                      <li>模数(mm)</li>
                      <li>压力角(°)</li>
                      <li>螺旋角(°)</li>
                      <li>中心距(mm)</li>
                      <li>齿宽(mm)</li>
                      <li>顶圆直径(mm)</li>
                      <li>齿面粗糙度Ra(um)</li>
                      <li>齿廓修形方式</li>
                      <li>主动轮</li>
                      <li>齿轮类型</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-input">
                      <li style="display: inline-block;width: 50%">小轮</li>
                      <li style="display: inline-block;width: 50%">大轮</li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.z1"/></li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.z2"/></li>
                      <li><input v-model="params_16.nM"></li>
                      <li><input v-model="params_16.an"></li>
                      <li><input v-model="params_16.beta"></li>
                      <li><input v-model="params_16.aw"></li>
                      <li><input v-model="params_16.b"></li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.ra1"/></li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.ra2"/></li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.Ra1x"/></li>
                      <li style="display: inline-block;width: 50%"><input style="width: 60%" v-model="params_16.Ra2x"/></li>
                      <li>
                        <select v-model="params_16.Tip">
                          <option value="1">无修型</option>
                          <option value="2">啮合平稳方式</option>
                          <option value="3">最高承载能力方式</option>
                        </select>
                      </li>
                      <li>
                        <select v-model="params_16.Driver">
                          <option value="1">小轮</option>
                          <option value="2">大轮</option>
                        </select>
                      </li>
                      <li>
                        <select v-model="params_16.gear_type">
                          <option value="1">外啮合</option>
                          <option value="2">内啮合</option>
                        </select>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="a-left-mid">
                <div class="title" style="height: 14%">载荷参数</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font3">
                      <li>小轮转速(r/min)</li>
                      <li>功率(kW)</li>
                      <li>使用系数</li>
                      <li>载荷分布系数</li>
                      <li>动载荷系数</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-input4">
                      <li><input v-model="params_16.n1" /></li>
                      <li><input v-model="params_16.P" /></li>
                      <li><input v-model="params_16.Ko" /></li>
                      <li><input v-model="params_16.Km" /></li>
                      <li><input v-model="params_16.Kv" /></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="a-left-btm">
                <div class="title" style="height: 16%">材料参数</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font3">
                      <li></li>
                      <li>弹性模量(MPa)</li>
                      <li>泊松比</li>
                      <li>热接触系数(N/mm2K)</li>
                    </ul>
                  </div>
                  <div class="right" id="mrt">
                    <ul
                      class="right-input1"
                      style="height: 100%;width:30%;float: left"
                    >
                      <li>小轮</li>
                      <li><input v-model="params_16.E1" /></li>
                      <li><input v-model="params_16.v1" /></li>
                      <li><input v-model="params_16.BM1" /></li>
                    </ul>
                    <ul
                      class="right-input2"
                      style="height: 100%;width:30%;float: left"
                    >
                      <li>大轮</li>
                      <li><input v-model="params_16.E2" /></li>
                      <li><input v-model="params_16.v2" /></li>
                      <li><input v-model="params_16.BM2" /></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="a-right">
              <div class="a-right-top">
                <div class="title" style="height: 8%">润滑参数</div>
                <div class="btm" style="height: 90%" id="bearing">
                  <div class="left">
                    <ul class="left-font">
                      <li>齿轮本体温度计算方法</li>
                      <li>齿轮本体温度</li>
                      <li>润滑方式</li>
                      <li>油池温度</li>
                      <li>齿轮本体温度下动力粘度计算方法</li>
                      <li>齿轮本体温度下润滑油动力粘度(mPa.s)</li>
                      <li>压力粘度系数(mm2/N)</li>
                      <li>40℃润滑油运动粘度(mm2/s)</li>
                      <li>是否选择标准润滑油</li>
                      <li>润滑油类型</li>
                      <li>润滑油ISOVG等级</li>
                      <li>40℃润滑油动力粘度(mPa.s)</li>
                      <li>100℃润滑油动力粘度(mPa.s)</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-input">
                      <li>
                        <select v-model="params_16.thetaM_input">
                          <option value="1">用户输入</option>
                          <option value="2">程序计算</option>
                        </select>
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaM_input == 1"
                          v-model="params_16.thetaM"
                        />
                      </li>
                      <li>
                        <select
                          v-show="params_16.thetaM_input == 2"
                          v-model="params_16.lubrication_type"
                        >
                          <option value="1">飞溅润滑</option>
                          <option value="2">喷油润滑</option>
                        </select>
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaM_input == 2"
                          v-model="params_16.theta_oil"
                        />
                      </li>
                      <li>
                        <select v-model="params_16.input_nM">
                          <option value="1">用户输入</option>
                          <option value="2">程序计算</option>
                        </select>
                      </li>
                      <li>
                        <input v-show="params_16.input_nM == 1" v-model="params_16.nM" />
                      </li>
                      <li>
                        <input
                          v-show="params_16.input_nM == 1 || params_16.input_oil == 2"
                          v-model="params_16.a"
                        />
                      </li>
                      <li><input v-model="params_16.v40" /></li>
                      <li>
                        <select
                          v-show="params_16.input_nM == 2"
                          v-model="params_16.input_oil"
                        >
                          <option value="1">是</option>
                          <option value="2">否</option>
                        </select>
                      </li>
                      <li>
                        <select
                          v-show="params_16.input_nM == 2 && params_16.input_oil == 1"
                          v-model="params_16.Lubricant"
                        >
                          <option value="1">Mineral oil</option>
                          <option value="2">PAO-based synthetic oil</option>
                          <option value="3">PAG-based synthetic oil</option>
                          <option value="4">MIL-L-7808K</option>
                          <option value="5">MIL-L-23699E</option>
                        </select>
                      </li>
                      <li class="rel">
                        <select
                          class="pos"
                          v-show="
                            params_16.input_nM == 2 &&
                              params_16.input_oil == 1 &&
                              params_16.Lubricant == 1
                          "
                          v-model="params_16.ISOVG"
                        >
                          <option value="1">32</option>
                          <option value="2">46</option>
                          <option value="3">68</option>
                          <option value="4">100</option>
                          <option value="5">150</option>
                          <option value="6">220</option>
                          <option value="7">320</option>
                          <option value="8">460</option>
                          <option value="9">980</option>
                          <option value="10">1000</option>
                          <option value="11">1500</option>
                          <option value="12">2000</option>
                          <option value="13">3200</option>
                        </select>
                        <select
                          class="pos"
                          v-show="
                            params_16.input_nM == 2 &&
                              params_16.input_oil == 1 &&
                              params_16.Lubricant == 2
                          "
                          v-model="params_16.ISOVG"
                        >
                          <option value="1">150</option>
                          <option value="2">220</option>
                          <option value="3">320</option>
                          <option value="4">460</option>
                          <option value="5">680</option>
                          <option value="6">1000</option>
                          <option value="7">1500</option>
                          <option value="8">2200</option>
                          <option value="9">3200</option>
                          <option value="10">6800</option>
                        </select>
                        <select
                          class="pos"
                          v-show="
                            params_16.input_nM == 2 &&
                              params_16.input_oil == 1 &&
                              params_16.Lubricant == 3
                          "
                          v-model="params_16.ISOVG"
                        >
                          <option value="1">100</option>
                          <option value="2">150</option>
                          <option value="3">220</option>
                          <option value="4">320</option>
                          <option value="5">460</option>
                          <option value="6">680</option>
                          <option value="7">1000</option>
                        </select>
                        <select
                          class="pos"
                          v-show="
                            params_16.input_nM == 2 &&
                              params_16.input_oil == 1 &&
                              params_16.Lubricant == 4
                          "
                          v-model="params_16.ISOVG"
                        >
                          <option value="1">12</option>
                          <option value="2">17</option>
                        </select>
                      </li>
                      <li>
                        <input
                          v-show="params_16.input_oil == 2"
                          v-model="params_16.n40"
                        />
                      </li>
                      <li>
                        <input
                          v-show="params_16.input_oil == 2"
                          v-model="params_16.n100"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="a-right-btm">
                <div class="title" style="height: 9%">其它</div>
                <div class="btm" style="height: 90%" id="other">
                  <div class="left">
                    <ul class="left-font">
                      <li>胶合温度计算方法</li>
                      <li>实验齿轮最大闪温(℃)</li>
                      <li>实验齿轮本体温度(℃)</li>
                      <li>焊合系数</li>
                      <li>胶合温度</li>
                      <li>摩擦系数计算方法</li>
                      <li>摩擦系数</li>
                      <li>粗糙度测量截断长度(mm)</li>
                      <li>计算点数</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-input">
                      <li>
                        <select v-model="params_16.thetaS_met">
                          <option value="1">从实验齿轮计算</option>
                          <option value="2">基于无添加剂油粘度</option>
                          <option value="3">基于有添加剂油粘度</option>
                          <option value="4">用户输入</option>
                        </select>
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaS_met == 1"
                          v-model="params_16.thetafl_max_test"
                        />
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaS_met == 1"
                          v-model="params_16.thetaM_test"
                        />
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaS_met == 1"
                          v-model="params_16.XW"
                        />
                      </li>
                      <li>
                        <input
                          v-show="params_16.thetaS_met == 4"
                          v-model="params_16.thetaS"
                        />
                      </li>
                      <li>
                        <select v-model="params_16.u_met">
                          <option value="1">计算常数</option>
                          <option value="2">计算变化值</option>
                          <option value="3">用户输入</option>
                        </select>
                      </li>
                      <li>
                        <input
                          v-show="params_16.u_met == 3"
                          v-model="params_16.um_const"
                        />
                      </li>
                      <li><input v-model="params_16.Lx" /></li>
                      <li><input v-model="params_16.nop" /></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="db" :class="{ B_show: this.Bcanshow }">
            <div class="title" style="height: 4%">输出参数</div>
            <div class="a-left">
              <div class="a-left-top">
                <div class="title" style="height: 8%">胶合计算结果</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font2">
                      <li>油池温度(℃)</li>
                      <li>轮齿本体温度(℃)</li>
                      <li>最大闪温(℃)</li>
                      <li>最大接触温度(℃)</li>
                      <li>胶合温度(℃)</li>
                      <li>胶合发生概率</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-label">
                      <li>
                        <label>{{ dataSource.theta_oil }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.thetaM }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.thetafl_max }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.thetaB_max }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.thetaS }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.pscuff }}</label>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="a-left-mid">
                <div class="title" style="height: 14%">油膜厚度计算结果</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font3">
                      <li>最小油膜厚度(um)</li>
                      <li>最小油膜厚度比</li>
                      <li>最小油膜厚度比(W&H)</li>
                      <li>磨损发生概率(%)</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-input4">
                      <li>
                        <label>{{ dataSource.hmin }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.lamad_min }}</label>
                      </li>
                      <li>
                        {{ dataSource.lamad_min_ad }}
                      </li>
                      <li>
                        <label>{{ dataSource.pwear }}</label>
                      </li>
                      <li>
                        <button class="abc" type="primary" @click="showModal">
                          !
                        </button>
                        <a-modal
                          title="齿数比限制值"
                          :visible="visible"
                          :confirm-loading="confirmLoading"
                          @ok="handleOk"
                          @cancel="handleCancel"
                        >
                          <img :src="abrasion" class="abrasion" />
                        </a-modal>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="a-left-btm">
                <div class="title" style="height: 14%">其它结果</div>
                <div class="btm" style="height: 88%">
                  <div class="left">
                    <ul class="left-font2">
                      <li>节圆线速度(m/s)</li>
                      <li>综合降低系数</li>
                      <li>压力粘度系数(mm2/N)</li>
                      <li>实际切向力(N)</li>
                      <li>法向工作力(N)</li>
                      <li>法向单位载荷(N/mm)</li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul class="right-label">
                      <li>
                        <label>{{ dataSource.vt }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.kd }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.a }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.ft }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.fwn }}</label>
                      </li>
                      <li>
                        <label>{{ dataSource.wn }}</label>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="a-right">
              <div class="btn" style="height: 6%;width: 100%">
                <button class="button1" @click="tclick">计算</button>
              </div>
              <div class="title" style="height: 4%">中间结果</div>
              <div style="height: 90%;width: 100%;overflow:auto;">
                <table style="width: 100%;">
                  <tr>
                    <th>计算点</th>
                    <th>摩擦系数</th>
                    <th>载荷分担</th>
                    <th>接触半宽</th>
                    <th>滑动速度(m/s)</th>
                    <th>接触闪温(*C)</th>
                    <th>油膜厚度</th>
                    <th>油膜厚度比</th>
                  </tr>
                  <tr v-for="(item,index) in dataSource.tab" :key="index">
                    <td>{{ item[0] }}</td>
                    <td>{{ item[1] }}</td>
                    <td>{{ item[2] }}</td>
                    <td>{{ item[3] }}</td>
                    <td>{{ item[4] }}</td>
                    <td>{{ item[5] }}</td>
                    <td>{{ item[6] }}</td>
                    <td>{{ item[7] }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { evaluating } from "@/api/file";
import abrasion from "@/assets/image/image_16_01.png";
export default {
  created () {
    document.title = '齿轮胶合计算（AGMA）' //模块中文名
    this.$store.state.file.key = 16 //设置key为自己的页面编号
  },
  name: "evalusting_scuffing_risk",
  data() {
    return {
      params_16:this.$store.state.file.dataList[16],
      abrasion,
      visible: false,
      confirmLoading: false,
      AisSelectActive: true,
      BisSelectActive: false,
      Acanshow: true,
      Bcanshow: false,
      dataSource: {
        theta_oil: "static text",
        thetaM: "static text",
        thetafl_max: "static text",
        thetaB_max: "static text",
        thetaS: "static text",
        pscuff: "static text",
        vt: "static text",
        hmin: "static text",
        lamad_min: "static text",
        pwear: "static text",
        kd: "static text",
        a: "static text",
        ft: "static text",
        fwn: "static text",
        wn: "static text",
        tab:[[]],
        nm: "static text",
        lamad_min_ad:"static text",
      }
    };
  },
  methods: {
    select() {
      this.AisSelectActive = !this.AisSelectActive;
      this.BisSelectActive = !this.BisSelectActive;
      this.Bcanshow = !this.Bcanshow;
      this.Acanshow = !this.Acanshow;
    },
    tclick() {
      evaluating(this.params_16)
        .then(res => {
          // console.log(this.params_16);
          console.log(res);
          // if (res.code === 200) {

            this.dataSource = res;
          // }
        })
        .catch(error => {
          console.log(error);
        });
    },
    showModal() {
      this.visible = true;
    },
    //点击ok
    // eslint-disable-next-line no-unused-vars
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 0);
    },
    //点击cancel
    // eslint-disable-next-line no-unused-vars
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    }
  }
};
</script>

<style scoped>
select{
  height: 85%;
}
input {
  height: 95%;
  text-align: center;
}
.rel {
  position: relative;
}
.pos {
  position: absolute;
  top: 0;
  left: 0;
}
.abc {
  width: 8%;
}
.abrasion {
  width: 80%;
  height: 100%;
  text-align: center;
}
.button1 {
  width: 15%;
  height: 80%;
  position: relative;
  left: 20%;
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}
.right-input1 li,.right-input2 li {
  height: 20%;
}
#mrt input {
  width: 80%;
}
#bearing li {
  height: 7.68%;
}
#other li {
  height: 11.1%;
}
.da,
.db {
  position: absolute;
  background-color: white;
  left: 0;
  top: 4%;
  width: 98%;
  height: 96%;
  margin-left: 1%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.db {
  /*默认显示da界面*/
  left: 100%;
}
.a-left {
  float: left;
  margin-top: 2%;
  margin-left: 2%;
  height: 90%;
  width: 46%;
}
.left-font,.left-font2,.left-font3 {
  position: absolute;
  right: 5%;
  height: 100%;
}
.left-font3 li{
  height: 20%;
  text-align: right;
}
.left-font2 li {
  height: 16.6%;
  text-align: right;
}
.left-font li {
  height: 8.33%;
  text-align: right;
}
.right-input{
  height: 100%;
  width: 100%;
  vertical-align: top;
  font-size: 0;
}
.right-label{
  height: 100%;
  width: 100%;
}
.right-input4{
  height: 100%;
  width: 100%;
}
.right-input4 li{
  height: 20%;
}
.right-input4 input{
  height: 90%;
}
.right-label li {
  height: 16.6%;
  width: 100%;
}
.right-input li {
  height: 8.33%;
  width: 100%;
  text-align: center;
  font-size: 12px;
}
.btm {
  width: 100%;
  position: relative;
}
.left {
  position: absolute;
  left: 0%;
  width: 50%;
  height: 100%;
}
.right {
  position: absolute;
  right: 0%;
  width: 50%;
  height: 100%;
}
.title {
  background-color: #d7d7d7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
  width: 100%;
}
.a-left-top {
  height: 50%;
  width: 100%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.a-left-mid {
  margin-top: 1%;
  height: 25%;
  width: 100%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.a-left-btm {
  margin-top: 1%;
  height: 20%;
  width: 100%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.a-right {
  float: right;
  height: 90%;
  width: 46%;
  margin-top: 2%;
  margin-right: 2%;
}
.a-right-top {
  height: 50%;
  width: 100%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
}
.a-right-btm {
  height: 45%;
  width: 100%;
  box-shadow: 1.5px 1.5px 2px #aaaaaa;
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 3px;
  margin-top: 3%;
}
.a,.b {
  display: block;
  float: left;
  height: 4%;
  color: rgb(51, 51, 51);
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(179, 179, 179);
  outline: none;
  line-height: 1.2;
}
.select_active {
  background-color: rgb(153, 153, 153);
  color: rgb(230, 230, 230);
}
.B_show {
  left: 0;
}
</style>
